<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的商店</title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {

        }

        .el-container,
        .bottom {
            margin-top: 5px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .block {
            margin: auto;
        }

        .demo-table-expand {
            font-size: 0;
            width: 1500px;
        }
        .demo-table-expand label {
            width: 100px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }


    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<el-container id="app">
    <el-row>
        <!--        <el-col :span="6" v-for="(o, index) in 8" :key="o" :offset="index > 0 ? 0 : 0">-->
        <el-col :span="24">
            <template>
                <el-table :data="shopList" style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="商家id">
                                    <span>{{props.row.businessId}}</span>
                                </el-form-item>
                                <el-from-item label="店铺id">
                                    <span>{{props.row.id}}</span>
                                </el-from-item>
                                <el-form-item label="店铺名称">
                                    <span>{{props.row.name}}</span>
                                </el-form-item>
                                <el-form-item label="店铺详情">
                                    <span>{{props.row.detail}}</span>
                                </el-form-item>
                                <el-form-item label="商家图片">
                                    <!-- 图片的显示 -->
                                    <span>
                                        <img :src="props.row.imgSrc" min-width="100%" height="200"/>
                                    </span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column label="店铺id" prop="id"></el-table-column>
                    <el-table-column label="店铺名称" prop="name"></el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="300">
                        <template slot-scope="scope">
                            <el-button type="text" prop="id" @click.prevent="goToDetails(scope.row.id)" size="small">修改</el-button>
                           <!-- <el-button type="text" size="small">商品管理</el-button>-->
                            <!--                                            <el-card :body-style="{ padding: '0px' }" class="box-card">
                                                <div style="padding: 14px;">
                                                    <span v-text="shop.name"></span>
                                                </div>
                                                <img :src="shop.imgSrc" class="image">
                                                <div style="padding: 14px;">
                                                    <div class="bottom clearfix">
                                                        <el-button type="text" class="button" data-value="shop.id" @click.prevent="goToDetails(shop.id)">查看详情
                                                        </el-button>
                                                        <el-button type="text" class="button" @click.prevent="goToProduct(shop.id)">餐品管理
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-card>-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
    </el-row>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>


    <el-footer>
        <el-row></el-row>
    </el-footer>

</el-container>
<script>
    var shopShow = new Vue({
        el: "#app",
        data: {
            //
            currentPage: 1,
            pageSize: 3,
            currentDate: new Date(),
            shopList: [{
                id: '',
                name: '',
                detail: '',
                imgSrc: ''
            }
            ],
            total: 10,
            shopId: ''

        },
        methods: {
            initShopList() {
                console.log("初始化商铺列表")
                let _this = this
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
                $.post("/shop/selectShopByBusinessId", params, function (data) {
                    _this.shopList = data.records;
                    _this.currentPage = data.current;
                    _this.pageSize = data.size;
                    _this.total = data.total;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                let _this = this
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
                $.post("/shop/selectShopByBusinessId", params, function (data) {
                    _this.shopList = data.records;
                    _this.currentPage = data.current;
                    _this.pageSize = data.size;
                    _this.total = data.total;
                })
            },
            goToDetails(id) {
                // alert("查看商家详情"+id)
                location.href = "/shop/selectShopByShopId?shopId=" + id
                // $.post("/shop/selectShopByShopId",{shopId:shopId},function (d){
                //     location.href=d
                // })
            }
            ,
            goToProduct(shopId) {
                location.href = "/myProducts.html?shopId=" + shopId;
            }
        },
        created() {
            this.initShopList()
        }
    });
</script>
</body>
</html>